<template>
	<view class="myWallet">
		<view class="myWallet__heard" :style="{height: `${search.top+search.height}px`}">
			<view class="myWallet__leftLogoBox" @click="goBack">
				<image src="/static/images/leftIcon.png"
					:style="{height: `${search.height}px`,width: `${search.height}px`}"></image>
			</view>
			<view class="myWallet__title"
				:style="{top: `${search.top}px`,height: `${search.height}px`,lineHeight: `${search.height}px`}">我的钱包
			</view>
		</view>

		<view class="myWallet__body">
			<view class="myWallet__bodyTop">
				<view class="myWallet__bodyTopTitle">
					<span>我的余额(元)</span>
					<span>¥{{walletMoney}}</span>
				</view>
				<view class="myWallet__bodyTopTitle">
					<span>待入账(元)</span>
					<span>¥{{frozenMoney}}</span>
				</view>
			</view>
			<view class="myWallet__bodyConter" @click="goPack">我要提现</view>
			<view class="myWallet__bodyButtom">
				<span @click="goPacks('/package/myAccount/index')">账户明细</span>
				<span @click="goPacks('/package/myRecord/index')">提现记录</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				frozenMoney: 0,
				walletMoney: 0,

			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.walletMoney = oprtion.walletMoney
			this.frozenMoney = oprtion.frozenMoney
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		methods: {
			goPacks(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.switchTab({
					url: `/pages/user/index`
				})
			},
			goPack() {
				uni.navigateTo({
					url: '/package/withdraw/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myWallet {
		min-height: 100vh;
		background-color: #f7f8fc;
	
	.myWallet__heard {
			width: 100%;
			display: flex;
			position: relative;

		}

		.myWallet__leftLogoBox {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 140rpx;
			flex: 0 0 140rpx;
			height: 100%;
			z-index: 99;

			image {
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				bottom: 0;
				left: 32rpx;
			}

		}

		.myWallet__title {
			width: 100%;
			text-align: center;
			position: absolute;
			font-size: 16px;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 22px;
			color: #000000;
		}

		.myWallet__bodyButtom {
			display: flex;
			justify-content: space-around;

			span {
				flex: 1;
				text-align: center;
				display: inline-block;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 104rpx;
				color: #2B2B33;
				height: 104rpx;
			}

			span:nth-child(1) {
				border-top: 3rpx solid #f5f6f9;
				border-right: 3rpx solid #f5f6f9;
			}

			span:nth-child(2) {
				border-top: 3rpx solid #f5f6f9;
			}
		}

		.myWallet__body {
			width: 686rpx;
			height: 426rpx;
			background: rgba(255, 255, 255, 0.39);
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;

			padding-top: 32rpx;
			box-sizing: border-box;
			margin: 32rpx auto;
		}

		.myWallet__bodyTop {
			display: flex;
			padding: 0 32rpx;
		}

		// withdraw
		.myWallet__bodyConter {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #f24858;
			text-align: center;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #FFFFFF;
			margin: 48rpx 32rpx;
			box-shadow: 0 30rpx 39rpx -10rpx #ddd;
		}

		.myWallet__bodyTopTitle {
			flex: 1;
			display: flex;
			flex-direction: column;

			span:nth-child(1) {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #868896;
				opacity: 1;
			}

			span:nth-child(2) {
				display: inline-block;
				height: 58rpx;
				font-size: 48rpx;
				font-family: DIN;
				font-weight: 500;
				line-height: 58rpx;
				color: #000000;
				-webkit-text-stroke: 0.5 #2B2B33;
				text-stroke: 0.5 #2B2B33;
				opacity: 1;
				margin-top: 10rpx;
			}
		}
	}
</style>
